<template>
  <base-scroll ref="scroll"
    :options="scrollOptions"
    :data="tracks">
    <div class="playlist">
      <base-loading-spinner v-if="loading"
        width="30px"
        height="30px"
        color="rgb(238, 10, 36)"
        itemWidth="8%"/>

      <div v-else>
        <song-list-poster :detail="detail" />
        <song-list-content
          :count="tracks.length"
          :collect="detail.subscribedCount"
          :tracks="tracks"
          @play-song="playSong"
          @update-playlist="updatePlaylist"/>
      </div>
    </div>
  </base-scroll>
</template>

<script>
import SongListContent from '@/components/SongListContent'
import SongListPoster from '@/components/SongListPoster'
import scrollMixin from '@/mixins/scroll'

export default {
  name: 'album',
  mixins: [scrollMixin],
  components: {
    SongListContent,
    SongListPoster
  },
  data () {
    return {
      loading: true,
      detail: {
        type: 'album',
        artists: [],
        name: '',
        coverImgUrl: '',
        description: '',
        publishTime: '',
        commentCount: 0,
        shareCount: 0
      },
      tracks: []
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.loading = true
      this.$api.getAlbumDetail(this.id).then(res => {
        this.loading = false
        const { album, songs } = res.data
        this.tracks = [].concat(songs)
        this.extractDetail(album)
      })
    },
    extractDetail (data) {
      this.detail.artists = [].concat(data.artists)
      this.detail.name = data.name
      this.detail.description = data.description
      this.detail.coverImgUrl = data.picUrl
      this.detail.publishTime = data.publishTime
      this.detail.commentCount = data.info.commentCount
      this.detail.shareCount = data.info.shareCount
    },
    playSong (song) {
      this.$store.dispatch('player/changeSong', { song, addPlaylist: false })
    },
    updatePlaylist () {
      this.$store.dispatch('player/updatePlaylist', {
        tracks: this.tracks,
        playlistId: this.id
      })
    }
  }
}
</script>
